<template>
  <div ref="dom" style="width: 100%; height: 100%;">
  </div>
</template>

<script>
  export default {
    name: "PieChart",
    props: ['data', 'cfg'],
    data() {
      return {
        chart: null,
        timer: null,
        currentIndex: -1,
        isPause: false
      }
    },
    watch: {
      data: {
        handler: function (n, o) {
          if (Object.keys(n).length > 0) this.loadChart();
        }
      }
    },
    mounted() {
      this.loadChart();
    },
    beforeDestroy() {
      this.destoryChart();
      this.clearTimer();
    },
    methods: {
      loadChart() {
        const data = this.data, cfg = this.cfg, echarts = this.$echarts, interval = cfg['interval'] || 1000;
        console.log(data);
        const isSmallScreen = window.screen.width < 1600;
        const option = {
          legend: {
            show:false,
          },
          series: [
            {
              name: '饼图',
              type: 'pie',
              radius: cfg['radius'] || ['50%', '80%'],
              center: cfg['center'] || ['35%', '50%'],
              avoidLabelOverlap: false,
              color: cfg['color'] || [],
              label:{
                formatter:'{b} {c}次 {d}%'
              },

              itemStyle: {
                borderWidth: 1,
                borderColor: '#111629'
              },

              data: data || []
            }
          ]
        };
        this.chart = echarts.getInstanceByDom(this.$refs.dom);

        if (this.chart) {
          // chart.clear();
          // chart && chart.dispose();
        } else {
          this.chart = echarts.init(this.$refs.dom, 'macarons');
        }

        this.chart.setOption(option, true);

        window.onresize = this.chart.resize;
      },
      destoryChart() {
        this.chart && this.chart.clear();
        this.chart && this.chart.dispose();
        this.chart = null;
      },
      clearTimer() {
        this.timer && clearInterval(this.timer);
        this.timer = null;
      }
    }
  }
</script>

<style scoped>

</style>
